<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>

    $(document).ready(function () {
        var ws;

        $("#b1").click(function () {
            var name = $("#name").val();
            ws = new WebSocket("ws://localhost:8080/my-chat/"+name);

            ws.onopen = function () {
                // 使用 send() 方法发送数据
                ws.send("发送数据");
                alert("数据发送中...");
            };
            // 接收服务端数据时触发事件
            ws.onmessage = function (evt) {
                var received_msg = evt.data;
                $("#message").append(evt.data);
                alert("数据已接收...");
            };

            // 断开 web socket 连接成功触发事件
            ws.onclose = function () {
                alert("连接已关闭...");
            };
        })

$("#send").click(function () {
    ws.send($("#t1").val());
})


    })







</script>
<body>

姓名: <input type="text" id="name">

<input type="button" id="b1" value="发送">
</br>
<input type="text" id="t1"><button id="send">send</button>
<div id="message"></div>
</body>
</html>